<template>
    <div>
        <!--头部+banner-->
        <div class="a-1">
            <!--顶部导航-->
            <div class="a-2">
                <div class="a-3">
                    <Header v-bind:state=1></Header>
                </div>
            </div>
            <!--banner-->
            <div class="target a-9" id="target-2">
                <div>
                    <div><img src="../../assets/image/banner1.png"></div>
                    <div><img src="../../assets/image/banner2.png"></div>
                    <div><img src="../../assets/image/banner3.png"></div>
                </div>
            </div>
            <!--搜索-->
            <div class="a-10">
                <form class="a-11">
                    <input class="a-12" type="text" placeholder="请输入关键字"/>
                    <button type="button" class="a-13"><img src="../../assets/image/index-26.png"/></button>
                </form>
            </div>

            <!--消息通知-->
            <div class="a-14">
                <div class="a-15">
                    <img class="a-16" src="../../assets/image/tz.png" />
                    <div class="a-17">
                        <div class="swiper-container swiper-containerOne">
                            <div class="swiper-wrapper clearfix">
                                <div class="swiper-slide"><a href="javascipt:;">消息通知消息通知消息消息通知消息通知消息</a></div>
                                <div class="swiper-slide"><a href="javascipt:;">消息通知消息通知消息消息通知消息通知消息</a></div>
                                <div class="swiper-slide"><a href="javascipt:;">消息通知消息通知消息消息通知消息通知消息</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--挂牌板块-->
        <div class="a-18">
            <div class="a-19">
                <!--左边-->
                <div class="a-20">
                    <div class="a-21">
                        <ul class="a-22">
                            <li :class="project_show?'active':''" @click="switchProductType">项目挂牌</li>
                            <li :class="project_show?'':'active'" @click="switchProductType">作品挂牌</li>
                        </ul>
                        <a href="javascript:;" class="a-23" @click="goListWorks">更多></a>
                    </div>
                    <div class="a-24">
                        <!--1-->
                        <div class="a-25-box" v-if="project_show">
                            <ul class="a-25">
                                <li v-for="(item) in projectList" :key="item.product_id" @click="showWorks(item.product_id)">
                                    <a href="javascript:;">
                                        <div class="a-26">
                                            <img class="a-27" :src="item.cover_image" />
                                            <div class="a-28"><span>{{item.empower_type==0?"部分转让":"全部转让"}}</span></div>
                                        </div>
                                        <div class="a-29">{{item.product_name}}</div>
                                        <div class="a-30">交易类型：项目挂牌</div>
                                        <div class="a-30">作品类型：{{projectTypeFormat(item)}}</div>
                                        <div class="a-31">
                                            <div class="a-32">￥<span>299.00</span></div>
                                            <div class="a-33">
                                                <span class="a-34"><img src="../../assets/image/fa-eye.png"/><span>{{item.see_num}}</span></span>
                                                <span class="a-34"><img src="../../assets/image/index-25.png"/><span>{{$moment(item.putaway_time).format('YYYY-MM-DD HH:mm')}}</span></span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                            <div class="a-35">
                                <a :class="projectShow==1?'active':''" v-if="projectPageList[0]<=projectListTotalPage" href="javascript:;" @click="changeProjectPage(projectPageList[0])">{{projectPageList[0]}}</a>
                                <a :class="projectShow==2?'active':''" v-if="projectPageList[1]<=projectListTotalPage" href="javascript:;" @click="changeProjectPage(projectPageList[1])">{{projectPageList[1]}}</a>
                                <a :class="projectShow==3?'active':''" v-if="projectPageList[2]<=projectListTotalPage" href="javascript:;" @click="changeProjectPage(projectPageList[2])">{{projectPageList[2]}}</a>
                                <a :class="projectShow==4?'active':''" v-if="projectPageList[3]<=projectListTotalPage" href="javascript:;" @click="changeProjectPage(projectPageList[3])">{{projectPageList[3]}}</a>
                                <a :class="projectShow==5?'active':''" v-if="projectPageList[4]<=projectListTotalPage" href="javascript:;" @click="changeProjectPage(projectPageList[4])">{{projectPageList[4]}}</a>
                                <a href="javascript:;" style="line-height: 30px;">...</a>
                                <a :class="projectShow==0?'active':''" href="javascript:;" @click="changeProjectPage(0)">{{projectListTotalPage}}</a>
                            </div>
                        </div>
                        <!--2-->
                        <div class="a-25-box" v-if="!project_show">
                            <ul class="a-25">
                                <li v-for="(item) in worksList" :key="item.product_id">
                                    <a href="javascript:;">
                                        <div class="a-26">
                                            <img class="a-27" :src="item.cover_image" />
                                            <div class="a-28"><span>{{item.empower_type==0?"部分转让":"全部转让"}}</span></div>
                                        </div>
                                        <div class="a-29">{{item.product_name}}</div>
                                        <div class="a-30">交易类型：作品挂牌</div>
                                        <div class="a-30">作品类型：{{worksTypeFormat(item)}}</div>
                                        <div class="a-31">
                                            <div class="a-32">￥<span>299.00</span></div>
                                            <div class="a-33">
                                                <span class="a-34"><img src="../../assets/image/fa-eye.png"/><span>{{item.see_num}}</span></span>
                                                <span class="a-34"><img src="../../assets/image/index-25.png"/><span>{{$moment(item.putaway_time).format('YYYY-MM-DD HH:mm')}}</span></span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                            <div class="a-35">
                                <a :class="worksShow==1?'active':''" v-if="worksPageList[0]<=worksListTotalPage" href="javascript:;" @click="changeWorksPage(worksPageList[0])">{{worksPageList[0]}}</a>
                                <a :class="worksShow==2?'active':''" v-if="worksPageList[1]<=worksListTotalPage" href="javascript:;" @click="changeWorksPage(worksPageList[1])">{{worksPageList[1]}}</a>
                                <a :class="worksShow==3?'active':''" v-if="worksPageList[2]<=worksListTotalPage" href="javascript:;" @click="changeWorksPage(worksPageList[2])">{{worksPageList[2]}}</a>
                                <a :class="worksShow==4?'active':''" v-if="worksPageList[3]<=worksListTotalPage" href="javascript:;" @click="changeWorksPage(worksPageList[3])">{{worksPageList[3]}}</a>
                                <a :class="worksShow==5?'active':''" v-if="worksPageList[4]<=worksListTotalPage" href="javascript:;" @click="changeWorksPage(worksPageList[4])">{{worksPageList[4]}}</a>
                                <a href="javascript:;" style="line-height: 30px;">...</a>
                                <a :class="worksShow==0?'active':''" href="javascript:;" @click="changeWorksPage(0)">{{worksListTotalPage}}</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--右边-->
                <div class="a-36">
                    <div class="a-37">挂牌资讯</div>
                    <img class="a-38" src="../../assets/image/index-14.png" />
                    <ul class="a-39">
                        <li><a href="javascript:;">
                            <div class="a-40">挂牌资讯挂牌资讯挂牌</div>
                            <div class="a-41">挂牌资讯挂牌资讯挂牌资讯挂牌资讯挂牌资讯挂牌资讯挂牌资讯...</div>
                            <div class="a-42"><img src="../../assets/image/index-25.png"/><span>2020-02-02</span></div>
                        </a></li>
                        <li><a href="javascript:;">
                            <div class="a-40">挂牌资讯挂牌资讯挂牌</div>
                            <div class="a-41">挂牌资讯挂牌资讯挂牌资讯挂牌资讯挂牌资讯挂牌资讯挂牌资讯...</div>
                            <div class="a-42"><img src="../../assets/image/index-25.png"/><span>2020-02-02</span></div>
                        </a></li>
                        <li><a href="javascript:;">
                            <div class="a-40">挂牌资讯挂牌资讯挂牌</div>
                            <div class="a-41">挂牌资讯挂牌资讯挂牌资讯挂牌资讯挂牌资讯挂牌资讯挂牌资讯...</div>
                            <div class="a-42"><img src="../../assets/image/index-25.png"/><span>2020-02-02</span></div>
                        </a></li>
                        <li><a href="javascript:;">
                            <div class="a-40">挂牌资讯挂牌资讯挂牌</div>
                            <div class="a-41">挂牌资讯挂牌资讯挂牌资讯挂牌资讯挂牌资讯挂牌资讯挂牌资讯...</div>
                            <div class="a-42"><img src="../../assets/image/index-25.png"/><span>2020-02-02</span></div>
                        </a></li>
                        <li><a href="javascript:;">
                            <div class="a-40">挂牌资讯挂牌资讯挂牌</div>
                            <div class="a-41">挂牌资讯挂牌资讯挂牌资讯挂牌资讯挂牌资讯挂牌资讯挂牌资讯...</div>
                            <div class="a-42"><img src="../../assets/image/index-25.png"/><span>2020-02-02</span></div>
                        </a></li>
                        <li><a href="javascript:;">
                            <div class="a-40">挂牌资讯挂牌资讯挂牌</div>
                            <div class="a-41">挂牌资讯挂牌资讯挂牌资讯挂牌资讯挂牌资讯挂牌资讯挂牌资讯...</div>
                            <div class="a-42"><img src="../../assets/image/index-25.png"/><span>2020-02-02</span></div>
                        </a></li>
                    </ul>
                    <div class="a-43">
                        <a href="javascript:;"><span class="a-44">查看更多</span><i class="a-45"></i></a>
                    </div>
                </div>
                <div style="clear: both;"></div>
            </div>
        </div>
        <!--核心服务-->
        <div class="a-46">
            <div class="a-47" >
                <div class="a-48">
                    <div class="a-49">core&emsp;&emsp;&emsp;services</div>
                    <div class="a-50">核心服务</div>
                    <img class="a-51" src="@/assets/image/index-9.png" />
                </div>
                <div class="a-52">
                    <ul class="a1-53">
                        <li><a href="havascript:;">
                            <img class="a1-54" src="@/assets/image/icon_bq.png"/>
                            <div class="a1-55"></div>
                            <div class="a1-56">DCI版权登记</div>
                        </a></li>
                        <li><a href="havascript:;">
                            <img class="a1-54" src="@/assets/image/icon_aq.png"/>
                            <div class="a1-55"></div>
                            <div class="a1-56">原创证据保全</div>
                        </a></li>
                        <li><a href="havascript:;">
                            <img class="a1-54" src="@/assets/image/icon_ss.png"/>
                            <div class="a1-55"></div>
                            <div class="a1-56">全网传播检测</div>
                        </a></li>
                        <li><a href="havascript:;">
                            <img class="a1-54" src="@/assets/image/icon_rz.png"/>
                            <div class="a1-55"></div>
                            <div class="a1-56">网络侵权取证</div>
                        </a></li>
                        <li><a href="havascript:;">
                            <img class="a1-54" src="@/assets/image/icon_sq.png"/>
                            <div class="a1-55"></div>
                            <div class="a1-56">对外授权管理</div>
                        </a></li>
                        <li><a href="havascript:;">
                            <img class="a1-54" src="@/assets/image/icon_xs.png"/>
                            <div class="a1-55"></div>
                            <div class="a1-56">线上线下维权</div>
                        </a></li>
                        <li><a href="havascript:;">
                            <img class="a1-54" src="@/assets/image/icon_yj.png"/>
                            <div class="a1-55"></div>
                            <div class="a1-56">版权风险预警</div>
                        </a></li>
                        <li><a href="havascript:;">
                            <img class="a1-54" src="@/assets/image/icon_xg.png"/>
                            <div class="a1-55"></div>
                            <div class="a1-56">正版作品供稿</div>
                        </a></li>
                        <li><a href="havascript:;">
                            <img class="a1-54" src="@/assets/image/icon_yfw.png"/>
                            <div class="a1-55"></div>
                            <div class="a1-56">第三方云服务</div>
                        </a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!--摘牌信息+热门权益人+影视版权-->
        <div class="a-54">
            <div class="a-55">
                <!--左-->
                <div class="a-56">
                    <div class="a-57">
                        <span class="a-58">摘牌信息</span>
                    </div>
                    <ul class="a-59">
                        <li v-for="(item,index) in DelistingList" :key="item.delistingId">
                            <a href="javascript:;">
                                <span class="a-60">{{index+1}}</span>
                                <span class="a-61">{{item.type}}</span>
                                <span class="a-62">{{item.contractId}}</span>
                                <span class="a-63">《{{item.productName}}》</span>
                                <span class="a-64">{{item.delistingTime}}</span>
                            </a>
                        </li>

                    </ul>
                </div>
                <!--右-->
                <div class="a-65">
                    <div class="a-57">
                        <span class="a-58">热门权益人</span>
                        <a href="javascript:;" class="a-23 a-66">更多></a>
                    </div>
                    <ul class="a-67">
                        <li><a href="javascript:;">
                            <div class="a-68"><img src="../../assets/image/index-16.png"/></div>
                            <div class="a-69">
                                <div class="a-70">中国电源报</div>
                                <div class="a-71">中国影视产业的咨询平台中国影视产业...</div>
                                <div class="a-72">作品数量：1449</div>
                            </div>
                        </a></li>
                        <li><a href="javascript:;">
                            <div class="a-68"><img src="../../assets/image/index-16.png"/></div>
                            <div class="a-69">
                                <div class="a-70">中国电源报</div>
                                <div class="a-71">中国影视产业的咨询平台中国影视产业...</div>
                                <div class="a-72">作品数量：1449</div>
                            </div>
                        </a></li>
                        <li><a href="javascript:;">
                            <div class="a-68"><img src="../../assets/image/index-16.png"/></div>
                            <div class="a-69">
                                <div class="a-70">中国电源报</div>
                                <div class="a-71">中国影视产业的咨询平台中国影视产业...</div>
                                <div class="a-72">作品数量：1449</div>
                            </div>
                        </a></li>
                        <li><a href="javascript:;">
                            <div class="a-68"><img src="../../assets/image/index-16.png"/></div>
                            <div class="a-69">
                                <div class="a-70">中国电源报</div>
                                <div class="a-71">中国影视产业的咨询平台中国影视产业...</div>
                                <div class="a-72">作品数量：1449</div>
                            </div>
                        </a></li>
                        <li><a href="javascript:;">
                            <div class="a-68"><img src="../../assets/image/index-16.png"/></div>
                            <div class="a-69">
                                <div class="a-70">中国电源报</div>
                                <div class="a-71">中国影视产业的咨询平台中国影视产业...</div>
                                <div class="a-72">作品数量：1449</div>
                            </div>
                        </a></li>
                        <li><a href="javascript:;">
                            <div class="a-68"><img src="../../assets/image/index-16.png"/></div>
                            <div class="a-69">
                                <div class="a-70">中国电源报</div>
                                <div class="a-71">中国影视产业的咨询平台中国影视产业...</div>
                                <div class="a-72">作品数量：1449</div>
                            </div>
                        </a></li>
                    </ul>
                </div>
            </div>
            <div class="a-73">
                <div class="a-48">
                    <div class="a-49">Film and television copyright</div>
                    <div class="a-50">影视版权</div>
                    <img class="a-51" src="../../assets/image/index-9.png" />
                </div>
                <div class="a-75">
                    <ul class="a-22 a-74">
                        <li :class="[videoCopyright==0?'active':'']" @click="videoCopyrightButton(0)">形象授权</li>
                        <li :class="[videoCopyright==1?'active':'']" @click="videoCopyrightButton(1)">电影音像制品</li>
                        <li :class="[videoCopyright==2?'active':'']" @click="videoCopyrightButton(2)">服装饰品</li>
                        <li :class="[videoCopyright==3?'active':'']" @click="videoCopyrightButton(3)">海报玩具</li>
                    </ul>
                </div>
                <div class="a-24 a-76">
                    <!--1-->
                    <div class="a-25-box a-87">
                        <div class="a-77">
                            <div class="a-78" @click="clickImageButton(0)"><img class="a-79" :src="VideoCopyrightList[videoCopyright][0].imageUrl"/></div>
                            <div class="a-78" @click="clickImageButton(1)"><img class="a-79" :src="VideoCopyrightList[videoCopyright][1].imageUrl"/></div>
                            <div class="a-78" @click="clickImageButton(2)"><img class="a-79" :src="VideoCopyrightList[videoCopyright][2].imageUrl"/></div>
                            <div class="a-78" @click="clickImageButton(3)"><img class="a-79" :src="VideoCopyrightList[videoCopyright][3].imageUrl"/></div>
                        </div>
                        <div class="a-80">
                            <img class="a-81" :src="VideoCopyrightList[videoCopyright][clickImage].imageUrl" />
                            <div class="a-82">
                                <div class="a-83">{{VideoCopyrightList[videoCopyright][clickImage].title}}</div>
                                <div class="a-84">{{VideoCopyrightList[videoCopyright][clickImage].text}}</div>
                                <a class="a-85" href="javascript:;" @click="golistVideo"><span class="a-44">查看更多</span><i class="a-45 a-86"></i></a>
                            </div>
                        </div>
                        <div class="a-77">
                            <div class="a-78" @click="clickImageButton(4)"><img class="a-79" :src="VideoCopyrightList[videoCopyright][4].imageUrl"/></div>
                            <div class="a-78" @click="clickImageButton(5)"><img class="a-79" :src="VideoCopyrightList[videoCopyright][5].imageUrl"/></div>
                            <div class="a-78" @click="clickImageButton(6)"><img class="a-79" :src="VideoCopyrightList[videoCopyright][6].imageUrl"/></div>
                            <div class="a-78" @click="clickImageButton(7)"><img class="a-79" :src="VideoCopyrightList[videoCopyright][7].imageUrl"/></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!--行业资讯-->
        <div class="a-88">
            <div class="a-89">
                <div class="a-48">
                    <div class="a-49">Industry Information</div>
                    <div class="a-50">行业资讯</div>
                    <img class="a-51" src="../../assets/image/index-9.png" />
                </div>
                <div class="a-90">
                    <div class="a-91">
                        <a class="a-97" href="javascript:;">
                            <div class="a-92">
                                <img class="a-93" src="../../assets/image/index-8.png" />
                                <div class="a-94">
                                    <div class="a-95">01</div>
                                    <div class="a-96">2017-01</div>
                                </div>
                            </div>
                            <div class="a-98">这是一条新闻标题告知公司最近发生了什么</div>
                        </a>
                        <a class="a-99" href="javascript:;">
                            <span class="a-44">查看更多</span><i class="a-45 a-100"></i>
                        </a>
                    </div>
                    <div class="a-101">
                        <ul class="a-102">
                            <li><a href="javascript:;">
                                <div class="a-103">
                                    <div class="a-104">01</div>
                                    <div class="a-105"></div>
                                    <div class="a-106">2017-01</div>
                                </div>
                                <div class="a-107">
                                    <div class="a-108">这是一条新闻标题告知公司最近发生了什么</div>
                                    <div class="a-109">新闻详情点击这里，这里是新闻的详情点击之后可以进行了解公司，文字均可以替换成自己公司的。</div>
                                </div>
                            </a></li>
                            <li><a href="javascript:;">
                                <div class="a-103">
                                    <div class="a-104">02</div>
                                    <div class="a-105"></div>
                                    <div class="a-106">2017-01</div>
                                </div>
                                <div class="a-107">
                                    <div class="a-108">这是一条新闻标题告知公司最近发生了什么</div>
                                    <div class="a-109">新闻详情点击这里，这里是新闻的详情点击之后可以进行了解公司，文字均可以替换成自己公司的。</div>
                                </div>
                            </a></li>
                            <li><a href="javascript:;">
                                <div class="a-103">
                                    <div class="a-104">03</div>
                                    <div class="a-105"></div>
                                    <div class="a-106">2017-01</div>
                                </div>
                                <div class="a-107">
                                    <div class="a-108">这是一条新闻标题告知公司最近发生了什么</div>
                                    <div class="a-109">新闻详情点击这里，这里是新闻的详情点击之后可以进行了解公司，文字均可以替换成自己公司的。</div>
                                </div>
                            </a></li>
                        </ul>
                    </div>
                    <div style="clear: both;"></div>
                </div>
            </div>
        </div>
        <!--合作伙伴-->
        <div class="a-110">
            <div class="a-111">
                <div class="a-48">
                    <div class="a-49">Part&emsp;&emsp;&emsp;&emsp;ner</div>
                    <div class="a-50">合作伙伴</div>
                    <img class="a-51" src="../../assets/image/index-9.png" />
                </div>
                <ul class="a-112">
                    <li><a href="javascript:;">
                        <img class="a-113" src="../../assets/image/index-17.png" />
                    </a></li>
                    <li><a href="javascript:;">
                        <img class="a-113" src="../../assets/image/index-17.png" />
                    </a></li>
                    <li><a href="javascript:;">
                        <img class="a-113" src="../../assets/image/index-17.png" />
                    </a></li>
                    <li><a href="javascript:;">
                        <img class="a-113" src="../../assets/image/index-17.png" />
                    </a></li>
                    <li><a href="javascript:;">
                        <img class="a-113" src="../../assets/image/index-17.png" />
                    </a></li>
                    <li><a href="javascript:;">
                        <img class="a-113" src="../../assets/image/index-17.png" />
                    </a></li>
                    <li><a href="javascript:;">
                        <img class="a-113" src="../../assets/image/index-17.png" />
                    </a></li>
                    <li><a href="javascript:;">
                        <img class="a-113" src="../../assets/image/index-17.png" />
                    </a></li>
                    <li><a href="javascript:;">
                        <img class="a-113" src="../../assets/image/index-17.png" />
                    </a></li>
                    <li><a href="javascript:;">
                        <img class="a-113" src="../../assets/image/index-17.png" />
                    </a></li>
                </ul>
            </div>
        </div>

    </div>
</template>

<script>
    import {worksList,projectList,indexList} from '@/api/index'
    import Header from '@/views/header.vue';
    export default {
        components:{
            Header
        },
        name: "index",
        data(){
            return{
                //影视版权按钮控制选择的类
                videoCopyright:0,
                clickImage:0, //选择的图片
                project_show:true,  //默认显示项目挂牌

                projectTypeOptions:[], //项目分类字典
                worksTypeOptions:[], //作品分类字典
                VideoCopyrightList:[
                    [{"clickUrl":"123","title":"标题1","text":"文字介绍1","imageUrl":"http://www.zhifeng.site/images/index-1.png"},
                    {"clickUrl":"123","title":"标题1","text":"文字介绍2","imageUrl":"http://www.zhifeng.site/images/index-2.png"},
                    {"clickUrl":"123","title":"标题1","text":"文字介绍3","imageUrl":"http://www.zhifeng.site/images/index-3.png"},
                    {"clickUrl":"123","title":"标题1","text":"文字介绍4","imageUrl":"http://www.zhifeng.site/images/index-4.png"},
                    {"clickUrl":"123","title":"标题1","text":"文字介绍5","imageUrl":"http://www.zhifeng.site/images/index-5.png"},
                    {"clickUrl":"123","title":"标题1","text":"文字介绍6","imageUrl":"http://www.zhifeng.site/images/index-6.png"},
                    {"clickUrl":"123","title":"标题1","text":"文字介绍7","imageUrl":"http://www.zhifeng.site/images/index-1.png"},
                    {"clickUrl":"123","title":"标题1","text":"文字介绍8","imageUrl":"http://www.zhifeng.site/images/index-2.png"}],
                    [{"clickUrl":"123","title":"标题2","text":"文字介绍1","imageUrl":"http://www.zhifeng.site/images/index-1.png"},
                        {"clickUrl":"123","title":"标题2","text":"文字介绍2","imageUrl":"http://www.zhifeng.site/images/index-2.png"},
                        {"clickUrl":"123","title":"标题2","text":"文字介绍3","imageUrl":"http://www.zhifeng.site/images/index-3.png"},
                        {"clickUrl":"123","title":"标题1","text":"文字介绍4","imageUrl":"http://www.zhifeng.site/images/index-4.png"},
                        {"clickUrl":"123","title":"标题1","text":"文字介绍5","imageUrl":"http://www.zhifeng.site/images/index-5.png"},
                        {"clickUrl":"123","title":"标题1","text":"文字介绍6","imageUrl":"http://www.zhifeng.site/images/index-6.png"},
                        {"clickUrl":"123","title":"标题1","text":"文字介绍7","imageUrl":"http://www.zhifeng.site/images/index-1.png"},
                        {"clickUrl":"123","title":"标题1","text":"文字介绍8","imageUrl":"http://www.zhifeng.site/images/index-2.png"}],
                    [{"clickUrl":"123","title":"标题3","text":"文字介绍1","imageUrl":"http://www.zhifeng.site/images/index-1.png"},
                        {"clickUrl":"123","title":"标题3","text":"文字介绍2","imageUrl":"http://www.zhifeng.site/images/index-2.png"},
                        {"clickUrl":"123","title":"标题3","text":"文字介绍3","imageUrl":"http://www.zhifeng.site/images/index-3.png"},
                        {"clickUrl":"123","title":"标题1","text":"文字介绍4","imageUrl":"http://www.zhifeng.site/images/index-4.png"},
                        {"clickUrl":"123","title":"标题1","text":"文字介绍5","imageUrl":"http://www.zhifeng.site/images/index-5.png"},
                        {"clickUrl":"123","title":"标题1","text":"文字介绍6","imageUrl":"http://www.zhifeng.site/images/index-6.png"},
                        {"clickUrl":"123","title":"标题1","text":"文字介绍7","imageUrl":"http://www.zhifeng.site/images/index-1.png"},
                        {"clickUrl":"123","title":"标题1","text":"文字介绍8","imageUrl":"http://www.zhifeng.site/images/index-2.png"}],
                    [{"clickUrl":"123","title":"标题4","text":"文字介绍1","imageUrl":"http://www.zhifeng.site/images/index-1.png"},
                        {"clickUrl":"123","title":"标题4","text":"文字介绍2","imageUrl":"http://www.zhifeng.site/images/index-2.png"},
                        {"clickUrl":"123","title":"标题4","text":"文字介绍3","imageUrl":"http://www.zhifeng.site/images/index-3.png"},
                        {"clickUrl":"123","title":"标题1","text":"文字介绍4","imageUrl":"http://www.zhifeng.site/images/index-4.png"},
                        {"clickUrl":"123","title":"标题1","text":"文字介绍5","imageUrl":"http://www.zhifeng.site/images/index-5.png"},
                        {"clickUrl":"123","title":"标题1","text":"文字介绍6","imageUrl":"http://www.zhifeng.site/images/index-6.png"},
                        {"clickUrl":"123","title":"标题1","text":"文字介绍7","imageUrl":"http://www.zhifeng.site/images/index-1.png"},
                        {"clickUrl":"123","title":"标题1","text":"文字介绍8","imageUrl":"http://www.zhifeng.site/images/index-2.png"}],
                ],
                worksList:[
                    {
                        "image": "http://www.zhifeng.site/images/index-2.png",
                        "empower_type": 0,
                        "product_id": 1,
                        "see_num": 0,
                        "works_type": 1,
                        "trading_type": 0,
                        "product_name": "测试作品1",
                        "notice_start_time": "2020-08-01T16:32:55.000+0800"
                    },
                    {
                        "image": "http://www.zhifeng.site/images/index-2.png",
                        "empower_type": 0,
                        "product_id": 3,
                        "see_num": 0,
                        "works_type": 1,
                        "trading_type": 0,
                        "product_name": "测试作品2",
                        "notice_start_time": "2020-08-01T16:32:55.000+0800"
                    },
                    {
                        "image": "http://www.zhifeng.site/images/index-2.png",
                        "empower_type": 0,
                        "product_id": 4,
                        "see_num": 0,
                        "works_type": 1,
                        "trading_type": 0,
                        "product_name": "测试作品3",
                        "notice_start_time": "2020-08-01T16:32:55.000+0800"
                    },
                    {
                        "image": "http://www.zhifeng.site/images/index-2.png",
                        "empower_type": 0,
                        "product_id": 5,
                        "see_num": 0,
                        "works_type": 1,
                        "trading_type": 0,
                        "product_name": "测试作品4",
                        "notice_start_time": "2020-08-01T16:32:55.000+0800"
                    },
                    {
                        "image": "http://www.zhifeng.site/images/index-2.png",
                        "empower_type": 0,
                        "product_id": 6,
                        "see_num": 0,
                        "works_type": 1,
                        "trading_type": 0,
                        "product_name": "测试作品5",
                        "notice_start_time": "2020-08-01T16:32:55.000+0800"
                    },
                    {
                        "image": "http://www.zhifeng.site/images/index-2.png",
                        "empower_type": 0,
                        "product_id": 7,
                        "see_num": 0,
                        "works_type": 1,
                        "trading_type": 0,
                        "product_name": "测试作品6",
                        "notice_start_time": "2020-08-01T16:32:55.000+0800"
                    }
                ],
                worksCurrentPage:1,    //作品当前页
                worksListTotalPage:1,  //作品总页数
                worksPageList:[1,2,3,4,5], //分页
                worksShow:1, //显示选中的分页
                projectList:[
                    {
                        "image": "http://www.zhifeng.site/images/index-2.png",
                        "empower_type": 0,
                        "product_id": 1,
                        "see_num": 0,
                        "works_type": 1,
                        "trading_type": 0,
                        "product_name": "测试作品1",
                        "notice_start_time": "2020-08-01T16:32:55.000+0800"
                    },
                    {
                        "image": "http://www.zhifeng.site/images/index-2.png",
                        "empower_type": 0,
                        "product_id": 3,
                        "see_num": 0,
                        "works_type": 1,
                        "trading_type": 0,
                        "product_name": "测试作品2",
                        "notice_start_time": "2020-08-01T16:32:55.000+0800"
                    },
                    {
                        "image": "http://www.zhifeng.site/images/index-2.png",
                        "empower_type": 0,
                        "product_id": 4,
                        "see_num": 0,
                        "works_type": 1,
                        "trading_type": 0,
                        "product_name": "测试作品3",
                        "notice_start_time": "2020-08-01T16:32:55.000+0800"
                    },
                    {
                        "image": "http://www.zhifeng.site/images/index-2.png",
                        "empower_type": 0,
                        "product_id": 5,
                        "see_num": 0,
                        "works_type": 1,
                        "trading_type": 0,
                        "product_name": "测试作品4",
                        "notice_start_time": "2020-08-01T16:32:55.000+0800"
                    },
                    {
                        "image": "http://www.zhifeng.site/images/index-2.png",
                        "empower_type": 0,
                        "product_id": 6,
                        "see_num": 0,
                        "works_type": 1,
                        "trading_type": 0,
                        "product_name": "测试作品5",
                        "notice_start_time": "2020-08-01T16:32:55.000+0800"
                    },
                    {
                        "image": "http://www.zhifeng.site/images/index-2.png",
                        "empower_type": 0,
                        "product_id": 7,
                        "see_num": 0,
                        "works_type": 1,
                        "trading_type": 0,
                        "product_name": "测试作品6",
                        "notice_start_time": "2020-08-01T16:32:55.000+0800"
                    }
                ],
                projectCurrentPage:1,//当前页
                projectListTotalPage:1,//项目总页数
                projectPageList:[1,2,3,4,5], //分页
                projectShow:1, //显示选中的分页
                indexList:[],
                DelistingList:[{"type":"影音","contractId":"CCT123TTTT123213","productName":"123","delistingTime":"2019-01-22"},
                    {"type":"影音","contractId":"CCT123TTTT123213","productName":"123","delistingTime":"2019-01-22"},
                    {"type":"影音","contractId":"CCT123TTTT123213","productName":"123","delistingTime":"2019-01-22"},
                    {"type":"影音","contractId":"CCT123TTTT123213","productName":"123","delistingTime":"2019-01-22"},
                    {"type":"影音","contractId":"CCT123TTTT123213","productName":"123","delistingTime":"2019-01-22"},
                    {"type":"影音","contractId":"CCT123TTTT123213","productName":"123","delistingTime":"2019-01-22"},
                    {"type":"影音","contractId":"CCT123TTTT123213","productName":"123","delistingTime":"2019-01-22"},
                    {"type":"影音","contractId":"CCT123TTTT123213","productName":"123","delistingTime":"2019-01-22"}],

            }
        },
        created(){
            this.getDicts("project_type").then(response => {
                this.projectTypeOptions = response.data;
            });
            this.getDicts("works_type").then(response => {
                this.worksTypeOptions = response.data;
            });
            this.getWorksList(1);
            this.getProjectList(1);
            this.getIndexList();

        },
        methods:{
            videoCopyrightButton(e){   //影视版权分类按钮
                this.videoCopyright=e;
                //this.$set(this.VideoCopyright,i,true)
            },
            clickImageButton(e){   //影视版权点击图片切换中间内容
                this.clickImage=e;
            },
            switchProductType(){   //切换作品与项目的按钮
                if(this.project_show){
                    this.project_show=false;
                }else{
                    this.project_show=true;
                }
            },
            //字典
            projectTypeFormat(row){
                return this.selectDictLabel(this.projectTypeOptions, row.project_type);
            },
            worksTypeFormat(row){
                return this.selectDictLabel(this.worksTypeOptions, row.works_type);
            },
            getWorksList(e){
                let data={currentPage:e}
                worksList(data).then(response =>{
                    console.log(response);
                    this.worksCurrentPage=e;
                    this.worksList=response.data.worksList;
                    this.worksListTotalPage=response.data.totalPage;
                })
            },
            getProjectList(e){
                let data={currentPage:e};
                projectList(data).then(response =>{
                    console.log(response);
                    this.projectCurrentPage=e;
                    this.projectList=response.data.projectList;
                    this.projectListTotalPage=response.data.totalPage;
                })
            },

            getIndexList(){
                indexList().then(response =>{
                    this.indexList=response.data.indexList;
                })
            },
            showWorks(e){
                console.log(e);
                this.$router.push({path:'/showWorks',query:{worksId:e}});
            },
            goListWorks(){  //前往版权交易页面
                this.$router.push('/listWorks')
            },
            golistVideo(){ //前往影视版权页面
                this.$router.push('/listVideo')
            },

            changeProjectPage(e){ //点击切换页
                let ye=e;
                if(e==1||e==2||e==3){
                    this.projectPageList=[1,2,3,4,5]
                    this.projectShow=e
                }else if(e>3 && e<this.projectListTotalPage-1){
                    this.projectPageList=[e-2,e-1,e,e+1,e+2];
                    this.projectShow=3
                }else if(e==this.projectListTotalPage-1){
                    this.projectPageList=[e-3,e-2,e-1,e,e+1];
                    this.projectShow=4
                }else if(e==this.projectListTotalPage){
                    this.projectShow=5
                }else if(e==0){
                    this.projectShow=0
                    ye=this.projectListTotalPage;
                }
                this.getProjectList(ye);
            },
            changeWorksPage(e){
                let ye=e;
                if(e==1||e==2||e==3){
                    this.worksPageList=[1,2,3,4,5]
                    this.worksShow=e
                }else if(e>3 && e<this.worksListTotalPage-1){
                    this.worksPageList=[e-2,e-1,e,e+1,e+2];
                    this.worksShow=3
                }else if(e==this.worksListTotalPage-1){
                    this.worksShow=4
                }else if(e==this.worksListTotalPage){
                    this.worksShow=5
                }else if(e==0){
                    this.worksShow=0
                    ye=this.worksListTotalPage;
                }
                this.getWorksList(ye);
            }
        }
    }
</script>

<style scoped>
    @import "../../css/index.css";
    @import "../../css/idangerous.swiper.css";
</style>
